<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.in.suppliername')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliername"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.sku"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.purchaseordercode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.in.suppliercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.supplierCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" align="left">
          <el-form-item :label="$t('m.createdate')" :label-width="formLabelWidth">
            <el-col :span="11">
              <el-form-item>
                <el-date-picker @change="checkDate" type="date" :placeholder="$t('m.in.choosedate')" v-model="formInline.startdate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2" align="center">-</el-col>
            <el-col :span="11">
              <el-form-item prop="enddate">
                <el-date-picker @change="checkDate" value-format="timestamp" type="date" :placeholder="$t('m.in.choosedate')" v-model="formInline.enddate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.in.erpordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.erpordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.state')" :label-width="formLabelWidth">
            <el-select v-model="formInline.state" :placeholder="$t('m.choose')">
              <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" v-if="hasPermission('search')" @click="search">{{$t('m.query')}}</el-button>
            <el-button type="primary" @click="exportMethod">{{$t('m.export')}}</el-button>
            <el-button v-if="hasPermission('finish')" :loading="btnLoading" @click="setComplete">{{$t('m.purchase.finish')}}</el-button>
            <el-button v-if="hasPermission('cancel')" @click="cancelPurchase">{{$t('m.purchase.cancel')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      class="single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
      v-loading="tableLoading"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="purchaseordercode" :label="$t('m.in.ordernumber')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-order')">
            <el-button type="text" @click.stop="openInfo(scope.row,'open')">{{scope.row.purchaseordercode}}</el-button>
          </template>
          <template v-else>{{scope.row.purchaseordercode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="erpordercode" :label="$t('m.in.erpordercode')"></el-table-column>
      <el-table-column :label="$t('m.state')" align="center" prop="statename"></el-table-column>
      <el-table-column align="center" prop="suppliername" :label="$t('m.in.suppliername')" width="140"></el-table-column>
      <el-table-column align="center" :label="$t('m.in.warehouse')">
        <span>{{$store.state.basicInfo.warehouseInfo.name}}</span>
      </el-table-column>
      <el-table-column align="center" prop="typename" :label="$t('m.in.typename')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
      <el-table-column :label="$t('m.operation')" align="center">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-notice')">
            <el-button size="mini" v-if="(scope.row.statename!=='已完成'&&scope.row.statename!=='已取消')" @click="openInfo(scope.row,'add')">{{$t('m.purchase.add')}}</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
    <!-- 生成到货通知开始 -->
    <el-dialog width="1200px" :title="$t('m.purchase.order')" :visible.sync="dialogFormVisible3">
      <el-form align="left" ref="ruleFormEdit" size="mini" :model="form">
        <el-row :gutter="10">
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth" prop="purOrderDto.purchaseordercode">
              <el-input disabled size="mini" v-model="form.purOrderDto.purchaseordercode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.in.consignor')" :label-width="formLabelWidth" prop="consignorname">
              <el-input disabled size="mini" v-model="form.purOrderDto.consignorname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.in.suppliername')" :label-width="formLabelWidth" prop="suppliername">
              <el-input disabled size="mini" v-model="form.purOrderDto.suppliername" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.in.typename')" :label-width="formLabelWidth" prop="typename">
              <el-input disabled size="mini" v-model="form.purOrderDto.typename" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item :label="$t('m.in.warehouse')" :label-width="formLabelWidth">
              <el-input disabled v-model="$store.state.basicInfo.warehouseInfo.name" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="section">
          <template>
            <el-table :data="form.purOrderdetailOutputList" border empty-text size="mini">
              <el-table-column :label="$t('m.index')" width="50" align="center">
                <template slot-scope="scope">{{scope.$index+1}}</template>
              </el-table-column>
              <el-table-column label="SKU" width="180" align="center">
                <template slot-scope="scope">
                  <el-form-item>
                    <span>{{scope.row.productspeccode}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="SupplierCode" width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item>
                    <span :v-model="scope.row.suppliercode">{{scope.row.suppliercode}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.in.productname')" align="center">
                <template slot-scope="scope">
                  <el-form-item>
                    <span :v-model="scope.row.productname">{{scope.row.productname}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.in.productspec')" align="center">
                <template slot-scope="scope">
                  <el-form-item>
                    <span :v-model="scope.row.productspec">{{scope.row.productspec}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.purchase.count')" align="center">
                <template slot-scope="scope">
                  <el-form-item>
                    <span :v-model="scope.row.plannedquantity">{{scope.row.plannedquantity}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.purchase.arrival')" align="center">
                <template slot-scope="scope">
                  <el-form-item>
                    <span :v-model="scope.row.actualquantity">{{scope.row.actualquantity}}</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-form>
      <div class="btns">
        <el-button v-if="opt==='add'" size="mini" @click="confirm">{{$t('m.confirm')}}</el-button>
        <el-button size="mini" @click="dialogFormVisible3=false">{{$t('m.close')}}</el-button>
      </div>
    </el-dialog>
    <!-- 生成到货通知结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'arrivalNotice',
  components:{},
  data(){
    return {
      formInline:{
        purchaseordercode:'',
        sku:'',
        startdate:'',
        enddate:'',
        supplierCode:'',
        suppliername:'',
        erpordercode:'',
        state:''
      },
      btnLoading:false, // 控制按钮loading，防止重复提交
      tableData:[],
      dialogFormVisible3:false,
      form:{
        purOrderDto:{
          purchaseordercode:''
        }
      },
      formLabelWidth:'140px',
      opt:'',
      purchaseOrderId:0
    }
  },
  computed:{
    stateOptions(){
      return [
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.purchase.state1'), value:1 },
        { label:this.$t('m.purchase.state4'), value:4 },
        { label:this.$t('m.reduction.state9'), value:9 },
        { label:this.$t('m.pick.state10'), value:20 }
      ]
    }
  },
  watch:{
    dialogFormVisible(){
      this.init()
    }
  },
  methods:{
    search(){
      this.page = 1
      this.init()
    },
    exportMethod(){
      common.exportMethod(`/excel/export/purchase`)
    },
    // 强制完成
    setComplete(){
      if(!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.purchase.choose'))
      if(this.tableRowSelected[0].state === 9||this.tableRowSelected[0].state === 20) return this.callbackMessage(this.$t('m.purchase.noFinish'))
      this.$confirm(this.$t('m.purchase.finishConfirm'), this.$t('m.noticemessage'), {
        confirmButtonText:this.$t('m.confirm'),
        cancelButtonText:this.$t('m.cancel'),
        center:true,
        type:'warning'
      }).then(() => {
        let options = {
          method:'put',
          url:`purchaseorder/finish/${this.tableRowSelected[0].purchaseorderid}`
        }
        this.btnLoading = false
        this.$axios(options).then(() => {
          this.$message({
            type:'success',
            message:this.$t('m.purchase.finishSuccess')
          })
          this.init()
        })
      }).catch(()=>{
        this.btnLoading = false
      })
    },
    //取消采购单
    cancelPurchase(){
      if(!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.purchase.choose'))
      this.$confirm(this.$t('m.purchase.cancelConfirm'), this.$t('m.noticemessage'), {
        confirmButtonText:this.$t('m.confirm'),
        cancelButtonText:this.$t('m.cancel'),
        center:true,
        type:'warning'
      }).then(() => {
        let options = {
          method:'put',
          url:`purchaseorder/cancel/${this.tableRowSelected[0].purchaseorderid}`
        }
        this.btnLoading = false
        this.$axios(options).then(() => {
          this.$message({
            type:'success',
            message:this.$t('m.purchase.cancelSuccess')
          })
          this.init()
        })
      }).catch(() => {
        this.btnLoading = false
      })
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/purchaseorder/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          purchaseordercode:this.formInline.purchaseordercode,
          sku:this.formInline.sku,
          suppliername:this.formInline.suppliername,
          supplierCode:this.formInline.supplierCode,
          startdate:common.timestampSimple(this.formInline.startdate),
          enddate:common.timestampSimple(this.formInline.enddate),
          erpordercode:this.formInline.erpordercode,
          state:this.formInline.state
        }
      }).then(({ data }) => {
        for (let i = 0;i < data.records.length;i++){
          data.records[i].createdate = common.timestampToTime(
            data.records[i].createdate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
      })
    },
    checkDate(){
      if (this.formInline.enddate && this.formInline.startdate){
        if (this.formInline.enddate < this.formInline.startdate){
          this.$message({
            showClose:true,
            message:this.$t('m.check.date'),
            type:'warning',
            duration:1000
          })
          setTimeout(() => {
            this.formInline.enddate = ''
          }, 0)
        }
      }
    },
    openInfo(row, opt){
      this.opt = opt
      this.purchaseOrderId = row.purchaseorderid
      this.dialogFormVisible3 = true
      this
        .$axios({
          method:'get',
          url:`/purchaseorder/${row.purchaseorderid}`
        })
        .then(({ data }) => {
          this.form = data
        })
    },
    confirm(){
      this
        .$axios({
          method:'post',
          url:`/purchaseorder/generateArrival`,
          params:{
            purchaseOrderId:this.purchaseOrderId
          }
        })
        .then(() => {
          this.dialogFormVisible3 = false
          this.$message.success(this.$t('m.purchase.success'))
          this.init()
        })
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible3 = false
    next()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.el-table .el-form-item--mini.el-form-item,
.el-table .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
</style>
